<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <!-- 数据概览卡片 -->
      <el-col :span="6" v-for="item in statsCards" :key="item.title">
        <el-card class="stats-card" shadow="hover">
          <div class="stats-card-header">
            <span class="stats-title">{{ item.title }}</span>
            <el-icon :size="40" :class="item.iconClass">
              <component :is="item.icon" />
            </el-icon>
          </div>
          <div class="stats-value">{{ item.value }}</div>
          <div class="stats-text">{{ item.text }}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt20">
      <!-- 非遗级别分布 -->
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>非遗级别分布</span>
            </div>
          </template>
          <div class="chart-container">
            <div ref="levelChart" style="height: 300px"></div>
          </div>
        </el-card>
      </el-col>

      <!-- 商品销量趋势 -->
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>商品销量趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <div ref="salesChart" style="height: 300px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <!-- 系统简介 -->
    <el-row :gutter="20" class="mt20">
      <el-col :span="24">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>系统简介</span>
            </div>
          </template>
          <div class="system-intro">
            <h3>非物质文化遗产管理系统</h3>
            <p>本系统致力于非物质文化遗产的保护、传承与发展,提供以下核心功能:</p>
            <ul>
              <li><b>非遗信息管理:</b> 全面管理非遗项目信息,包括基本信息、传承人、保护单位等</li>
              <li><b>非遗商品管理:</b> 支持非遗相关商品的展示、销售及库存管理</li>
              <li><b>非遗论坛交流:</b> 为非遗爱好者提供交流平台,促进文化传播</li>
              <li><b>数据统计分析:</b> 提供多维度的数据统计与分析功能</li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { Collection, ShoppingCart, ChatDotRound, Bell } from '@element-plus/icons-vue'
import { getStatistics, getHotProducts, getLevelDistribution, getSalesTrend } from '@/api/ich/stats'

const levelChart = ref(null)
const salesChart = ref(null)

// 数据概览卡片数据
const statsCards = ref([
  {
    title: '非遗总数',
    value: 0,
    text: '项非遗项目',
    icon: Collection,
    iconClass: 'heritage-icon'
  },
  {
    title: '商品总数',
    value: 0,
    text: '件非遗商品',
    icon: ShoppingCart,
    iconClass: 'product-icon'
  },
  {
    title: '论坛帖子',
    value: 0,
    text: '篇帖子',
    icon: ChatDotRound,
    iconClass: 'forum-icon'
  },
  {
    title: '库存预警',
    value: 0,
    text: '件商品库存不足',
    icon: Bell,
    iconClass: 'warning-icon'
  }
])

const hotProducts = ref([])

// 初始化非遗级别分布图表
function initLevelChart(data) {
  const chartInstance = echarts.init(levelChart.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center'
    },
    series: [
      {
        name: '级别分布',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold'
          }
        },
        data: data || []
      }
    ]
  }
  chartInstance.setOption(option)
  window.addEventListener('resize', () => {
    chartInstance.resize()
  })
}

// 初始化销量趋势图表
function initSalesChart(data) {
  const chartInstance = echarts.init(salesChart.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: data ? data.map(item => item.month) : []
    },
    yAxis: {
      type: 'value',
      name: '销量'
    },
    series: [
      {
        name: '销量',
        type: 'line',
        smooth: true,
        data: data ? data.map(item => item.sales) : [],
        areaStyle: {
          opacity: 0.3
        }
      }
    ]
  }
  chartInstance.setOption(option)
  window.addEventListener('resize', () => {
    chartInstance.resize()
  })
}

// 加载数据
async function loadData() {
  try {
    // 获取统计数据
    const statsRes = await getStatistics()
    if (statsRes.code === 200) {
      statsCards.value[0].value = statsRes.data.totalHeritage
      statsCards.value[1].value = statsRes.data.totalProducts
      statsCards.value[2].value = statsRes.data.totalPosts
      statsCards.value[3].value = statsRes.data.warningCount
    }

    // 获取热门商品数据
    const hotProductsRes = await getHotProducts()
    if (hotProductsRes.code === 200) {
      hotProducts.value = hotProductsRes.data
    }

    // 获取级别分布数据
    const levelRes = await getLevelDistribution()
    if (levelRes.code === 200) {
      initLevelChart(levelRes.data)
    }

    // 获取销量趋势数据
    const salesRes = await getSalesTrend()
    if (salesRes.code === 200) {
      initSalesChart(salesRes.data)
    }
  } catch (error) {
    console.error('加载数据失败:', error)
  }
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  background-color: var(--el-bg-color-page);

  .stats-card {
    .stats-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .stats-title {
        font-size: 16px;
        color: var(--el-text-color-regular);
      }
    }

    .stats-value {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
      color: var(--el-text-color-primary);
    }

    .stats-text {
      color: var(--el-text-color-secondary);
      font-size: 14px;
    }

    .heritage-icon {
      color: #409EFF;
    }

    .product-icon {
      color: #67c23a;
    }

    .forum-icon {
      color: #e6a23c;
    }

    .warning-icon {
      color: #f56c6c;
    }
  }

  .mt20 {
    margin-top: 20px;
  }

  .chart-container {
    padding: 10px;
  }

  .system-intro {
    padding: 20px;
    line-height: 1.8;

    h3 {
      color: var(--el-text-color-primary);
      margin-bottom: 15px;
    }

    p {
      color: var(--el-text-color-regular);
      margin-bottom: 10px;
    }

    ul {
      padding-left: 20px;
      
      li {
        margin-bottom: 10px;
        color: var(--el-text-color-regular);

        b {
          color: var(--el-text-color-primary);
        }
      }
    }
  }
}
</style>

